<script>
export default {
  data() {
    return {
      dialogVisible: false,
      schoolList: [],
      gradeList: [],
      classList: [],
      treeData: [],
      schoolForm: {
        school: '',
        grade: '',
        class: '',
      },
      countList: [{
        community: '',
        noWantNumber: 1,
        wantNumber: 1
      }],
      minNum: 0,
    }
  },
  props: {
    schoolMsg: Object
  },
  mounted() {

    this.getTreeData();
  },
  methods: {
    openDia() {
      this.dialogVisible = true;
      this.getSchool();
    },
    getTreeData() {
      this.$HttpService.get(`/t-district/findTreeAuth`).then(res => {
        this.treeData = res;
      })
    },
    getSchool() {
      this.$HttpService.get(`/t-school/findSchoolClassTree`).then(res => {
        this.schoolList = res;
        this.schoolForm.school = this.schoolMsg.schoolCode;
        this.getGrade(this.schoolMsg.schoolCode)
      })
    },
    getGrade(res) {
      this.gradeList = this.schoolList.filter(item => {
        return item.schoolCode == res
      })[0]?.children;
      this.schoolForm.grade = this.schoolMsg.grade;
      this.getClass(this.schoolMsg.grade)
    },
    getClass(res) {
      this.classList = this.gradeList.filter(item => {
        return item.name == res
      })[0]?.children;
      this.schoolForm.class = this.schoolMsg.classCode;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    submitData() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitHttp();
        } else {
          return false;
        }
      });

    },
    submitHttp() {
      if(this.countList.filter(x=>{return x.community == ''}).length){
        return this.$message.warning('请完善学生常驻村社区！')
      }
      let para = [];
      this.countList.forEach(item => {
        para.push({
          classCode: this.schoolForm.class,
          districtCode: item.community[item.community.length-1],
          noWantNumber: item.noWantNumber,
          wantNumber: item.wantNumber,
        })
      })
      this.$HttpService.post(`/t-student-trip-statistics/addList`, para).then(res => {
        this.dialogVisible = false;
        this.$message.success("添加成功！")
        this.$emit('addSuccess')
        this.reSetData();
      })
    },
    reSetData() {
      this.$refs['ruleForm'].clearValidate();
      this.schoolForm = {
        school: '',
        grade: '',
        class: '',
      };
      this.countList = [{
        community: '',
        noWantNumber: 1,
        wantNumber: 1
      }]
    },
    addCountList() {
      this.countList.push({
        community: '',
        noWantNumber: 1,
        wantNumber: 1
      })
    },
    removeCountList(index) {
      this.countList.splice(index, 1)
    },
    handleChange() {

    }
  }
}
</script>

<template>
  <el-dialog title="新增学生出行统计信息填报" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
    <div class="center">
      <div class="school">
        <el-form :model="schoolForm" inline ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="学校：" :rules="{ required: true, message: '请选择学校', trigger: 'blur' }" prop="school">
            <el-select v-model="schoolForm.school" filterable placeholder="请选择学校" @change="getGrade">
              <el-option v-for="x in schoolList" :key="x.id" :label="x.schoolName" :value="x.schoolCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级：" :rules="{ required: true, message: '请选择年级', trigger: 'blur' }" prop="grade">
            <el-select v-model="schoolForm.grade" placeholder="请选择年级" @change="getClass">
              <el-option v-for="x in gradeList" :key="x.id" :label="x.name" :value="x.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班级：" :rules="{ required: true, message: '请选择班级', trigger: 'blur' }" prop="class">
            <el-select v-model="schoolForm.class" placeholder="请选择班级">
              <el-option v-for="x in classList" :key="x.id" :label="x.className" :value="x.classCode"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="out">
        <div class="count" v-for="(x,index) in countList" :key="x.community">
          <div class="c c1">
            <span>学生常驻村社区：</span>
            <el-cascader
                size="small"
                v-model="x.community"
                :options="treeData"
                :props="{ expandTrigger: 'hover',value:'districtCode',label:'districtName' }"
                @change="handleChange"></el-cascader>
          </div>
          <div class="c c1">
            <span>需专线运送数量：</span>
            <el-input-number size="small" v-model="x.wantNumber" :min="x.noWantNumber==0?1:0"
                             label="需专线运送数量"></el-input-number>
          </div>
          <div class="c c1">
            <span>不需专线运送数量：</span>
            <el-input-number size="small" v-model="x.noWantNumber" :min="x.wantNumber==0?1:0"
                             label="不需专线运送数量"></el-input-number>
          </div>
          <div class="c c1">
            <!--                        <el-button @click="addCountList" size="small" type="primary" icon="el-icon-plus" circle v-if="index === countList.length-1"></el-button>-->
            <el-button @click="removeCountList(index)" size="small" type="danger" icon="el-icon-delete" circle
                       v-if="countList.length > 1"></el-button>
          </div>
        </div>
        <div class="add">
          <el-button size="small" @click="addCountList" icon="el-icon-plus">新增数据</el-button>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="submitData">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.center {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 15%;

  .school {
    display: flex;
    justify-items: center;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e7e7e7;

    .s {
      margin-right: 20px;
    }
  }

  .out {

    .add {
      padding-top: 20px;
    }
  }

  .count {
    display: flex;
    padding-top: 20px;

    .c {
      margin-right: 40px;
    }
  }

  .btn {
    padding: 20px;
    text-align: right;
  }
}

</style>
